<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <h1>mongodb 的增删改查的演示</h1>
  <div>
    <div>
      名称: <input type="text" id="username">
    </div>
    <div>
      密码: <input type="password" id="password">
    </div>
    <div>年龄: <input type="number" id="age"></div>
    <div><button id="register">注册</button></div>
  </div>
  <hr>
  <div>
    <button id="update">更新</button>
    <button id="delete">删除</button>
  </div>

  <table border="1">
    <thead>
      <tr>
        <td>id</td>
        <td>用户名</td>
        <td>年龄</td>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    let register = document.querySelector("#register")
    let age = document.querySelector("#age")
    let password = document.querySelector("#password")
    let username = document.querySelector("#username")
    let update = document.querySelector("#update")
    let del = document.querySelector("#delete")
    let tbody = document.querySelector("tbody")
    register.onclick = () => {
      axios.post('http://localhost:3000/api/user/add', {
        username: username.value,
        password: password.value,
        age: age.value
      }).then(res => {
        console.log(res.data);
      }).catch(err => {
        console.log(err);
      })
    }

    update.onclick = () => {
      axios.post('http://localhost:3000/api/user/update/657e6de20d12a8597f0d04b0', {
        username: "名字",
        password: "密码",
        age: 1
      }).then(res => {
        console.log(res.data);
      }).catch(err => {
        console.log(err);
      })
    }
    del.onclick = () => {
      axios.get('http://localhost:3000/api/user/delete/657e6de20d12a8597f0d04b0').then(res => {
        console.log(res.data);
      }).catch(err => {
        console.log(err);
      })
    }

    axios.get("http://localhost:3000/api/user/list?page=1&limit=10").then((res) => {
      console.log(res.data, 123456);
      tbody.innerHTML = res.data.map(item => `
        <tr>
          <td>${item._id}</td>  
          <td>${item.username}</td>  
          <td>${item.age}</td>  
        </tr>
      `).join("")
    }).catch(err => {
      console.log(err);
    })

  </script>
</body>
</html>